<template>
    <el-button-group v-if="isBtn">
        <el-button type="primary" v-for="btn in button" :key="btn.id" @click="btnClick(btn)">
            <i :class="`verjsfont verjs-${btn.img} vea-btn-icon`"/>
            {{ btn.name }}
        </el-button>
    </el-button-group>
    <div class="vea-option-btn" v-else>
        <div class="vea-option-btn-list" v-for="btn in button" :key="btn.id">
            <el-button type="primary" size="small" link v-if="btn.option !== 'delete'" @click="btnClick(btn)">
                <i :class="`verjsfont verjs-${btn.img} vea-btn-icon`"/>
                {{ btn.name }}
            </el-button>
            <el-popconfirm :title="deleteText" @confirm="btnClick(btn)" width="220px" v-else>
                <template #reference>
                    <el-button type="primary" size="small" link>
                        <i :class="`verjsfont verjs-${btn.img} vea-btn-icon`"/>
                        {{ btn.name }}
                    </el-button>
                </template>
            </el-popconfirm>
        </div>
    </div>
</template>

<script setup>
import {computed, defineProps, onMounted, ref, defineEmits} from "vue";
import {$ajax, apiUrl} from "@/utils/request";
import {useRoute} from "vue-router";
import router from "@/router";

const prop = defineProps({
    type: {
        type: String,
        default: () => "btn"
    },
    row: {
        type: Object,
        default: () => {
            return {}
        }
    },
    deleteText: {
        type: String,
        default: () => "确认删除？"
    },
    routeQuery: {
        type: Object,
        default: () => {
            return {}
        }
    },
    openSearch: {
        type: Boolean,
        default: () => false
    }
})
const isBtn = computed(() => {
    return prop.type === "btn"
})
const button = ref([]);
const route = useRoute();
const emit = defineEmits(["delete", "search", "clear"]);
const routeList = computed(() => {
    return router.options.routes.map(its => its.name)
})
onMounted(() => {
    if (prop.openSearch) {
        button.value = [{
            id: 0,
            name: "搜索",
            img: "search"
        }, {
            id: 0,
            name: "清除",
            img: "delete"
        }];
    }
    const cacheBtn = window.sessionStorage.getItem(`${route.name}_option_button`)
    if (prop.type === 'btn' || (prop.type === 'option' && !cacheBtn)) {
        $ajax.get(`${apiUrl}/menu/optionBtn`, {params: {parent: route.name}}).then(({data: {result}}) => {
            button.value = button.value.concat(result[prop.type]);
            if (prop.type === 'option') {
                window.sessionStorage.setItem(`${route.name}_option_button`, JSON.stringify(result.option))
            }
        })
    } else {
        button.value = button.value.concat(JSON.parse(cacheBtn));
    }

})

const btnClick = (btn) => {
    let _route = {name: btn.jingle, query: prop.routeQuery}
    if (prop.type === 'btn') {
        switch (btn.type) {
            case "search":
            case "clear":
                emit(btn.type)
                return;
        }
    } else {
        switch (btn.option) {
            case "delete":
                $ajax.get(`${apiUrl}/auth/checkOpt.html`, {params: {route: btn.href}}).then(() => {
                    emit("delete", prop.row.row,prop.row.$index)
                })
                return;
            default:
                _route.params = {id: prop.row.row.id}
                break;
        }
    }
    console.log(_route,routeList.value)
    if (routeList.value.some(its => its === btn.jingle))
        router.push(_route);
}
</script>

<style lang="less" scoped>
.vea-option-btn {
  display: flex;
  flex-wrap: wrap;

  .vea-option-btn-list {
    margin-right: 10px;
  }
}
</style>
